<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:sg="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>SmartGrid</title>
        <h:outputStylesheet library="css" name="Main.css" />
        <h:outputStylesheet library="css" name="Form.css" />
        <h:outputStylesheet library="css" name="TopMenu.css" />
        <h:outputStylesheet library="css" name="Footer.css" />
        <h:outputStylesheet library="css" name="Chart.css" />
        <h:outputStylesheet library="css" name="tipsy.css" />
        <h:outputStylesheet library="css" name="jquery-ui-1.8.14.custom.css" />
        <h:outputStylesheet library="css" name="datepicker.css" />
        <h:outputStylesheet library="css" name="datePickerLayout.css" />
        <h:outputScript library="javascript" name="jQuery.js" />
        <h:outputScript library="javascript" name="jquery.tipsy.js" />
        <h:outputScript library="javascript" name="jQueryUi.js" />
        <h:outputScript library="javascript" name="jQueryUiWidget.js" />
        <h:outputScript library="javascript" name="jQueryUiDatePicker.js" />
        <h:outputScript library="javascript" name="datepicker.js" />
        <h:outputScript library="javascript" name="eye.js" />
        <h:outputScript library="javascript" name="layout.js" />
        <h:outputScript library="javascript" name="highcharts.js" />
        <h:outputScript library="javascript" name="Stats.js" />
        <h:outputScript library="javascript" name="json2.js" />
        <h:outputScript library="javascript" name="MyJs.js" />
    </h:head>
    <h:body >
        <sg:pageHeader >
            <ui:param name="menu" value="true" />
        </sg:pageHeader>
        <h:form id="mainForm">
            <h:panelGroup styleClass="chooseDate" >
                <div id="contractSelector" class="combo">
                    <h:outputText value="Contracto:" />
                    <h:selectOneMenu id="contractSelectorMenu" value="#{indexBackingBean.selectedContract}" title="Selecione o contrato para o qual deseja visualizar as estatísticas.">
                        <f:selectItems value="#{indexBackingBean.contracts}" />
                        <f:param name="currentDate" value="normal" />
                        <f:ajax event="change" render="charts" onevent="refreshChart" />
                    </h:selectOneMenu>
                </div>
                <div id="widget"> 
                    <div id="widgetField"> 
                        <span></span>
                        <a id="editCalLink" href="#" title="Clique para ver o calendário e editar o intervalo de datas selcionado.">Editar</a> 
                    </div> 
                    <div id="widgetCalendar"> 
                    </div>
                    <div class="calMenu">
                        <h:commandButton id="calSubmitButton" value="Submeter" title="Clique para ver as estatísticas no intervalo de datas definidas." >
                            <f:param name="currentDate" value="normal" />
                            <f:ajax event="click" render="charts" onevent="refreshChart" />
                        </h:commandButton>
                    </div>
                </div> 
            </h:panelGroup>
            <h:panelGroup id="charts">
                <h:inputHidden id="Render" value="#{indexBackingBean.render}" />
                <h:inputHidden id="EletricUnit" value="#{indexBackingBean.eletricUnit}" />
                <h:inputHidden id="MoneyUnit" value="#{indexBackingBean.moneyUnit}" />
                <h:inputHidden id="UserName" value="#{indexBackingBean.userName}" />
                <h:inputHidden id="EletricData" value="#{indexBackingBean.eletricData}" />
                <h:inputHidden id="MoneyData" value="#{indexBackingBean.moneyData}" />
                <h:inputHidden id="SecMoneyData" value="#{indexBackingBean.secMoneyData}" />
                <h:inputHidden id="InitDate" value="#{indexBackingBean.initDateString}" />
                <h:inputHidden id="Annotations" value="#{indexBackingBean.annotations}" />

                <h:inputHidden id="CurrentDate" value="#{indexBackingBean.currentDate}" />

                <div class="chart" id="eletric"></div>
                <h:panelGroup styleClass="calRadioForm">
                    <h:selectOneRadio id="calRadioId" styleClass="calRadio" value="#{indexBackingBean.interval}" >
                        <f:selectItem id="hora" itemLabel="Hora" itemValue="Hora" />
                        <f:selectItem id="dia" itemLabel="Dia" itemValue="Dia" />
                        <f:selectItem id="mes" itemLabel="Mês" itemValue="Mes" />
                        <f:selectItem id="semana" itemLabel="Média por dia de Semana" itemValue="Semana" />
                        <f:param name="currentDate" value="normal" />
                        <f:ajax event="change" render="charts" onevent="refreshChart" />
                    </h:selectOneRadio>
                </h:panelGroup>
            <h2>Custos:</h2>
            <div class="chart" id="money"></div>
            <div id="tariffSelector" class="combo">
                    <h:outputText value="Tarifário:" />
                    <h:selectOneMenu id="tariffSelectorSelect" value="#{indexBackingBean.selectedTariff}" title="Selecione um tarifário alternativo para comparar os gastos com o seu tarifário actual.">
                        <f:selectItems value="#{indexBackingBean.tariffs}">
                            <f:param name="currentDate" value="tariff" />
                        </f:selectItems>
                        <f:ajax event="change" render="charts" onevent="refreshChart" />
                    </h:selectOneMenu>
                </div>
            <h3>
                Total: <h:outputText value="#{indexBackingBean.total}" />
            </h3>
            </h:panelGroup>

        </h:form>
        <sg:pageFooter />
        <script>
            refreshChart();
        </script>

    </h:body>
</html>
